<template>
    <ul class="nav">
        <li v-for="item in list" :key="item.id">
            <img :src="item.author.avatar_url" alt="">
            <span class="span1">{{item.reply_count}}/</span>
            <span class="span2">{{item.visit_count}}/</span>
            <p>{{item.title}}</p>
        </li>
    </ul>
</template>

<script>
export default {
    data() {
        return {
            list: []
        }
    },
    mounted() {
        this.getData()
    },
    methods: {
        async getData() {
            let res = await this.$http.get(' https://cnodejs.org/api/v1/topics')
                console.log(res.data.data)
                this.list = res.data.data
            }
    },
}
</script>

<style lang="scss" >
.nav {
    width: 100%;
    li {
        width: 100%;
        height: 40px;
        display: flex;
        border-bottom: 1px solid #ccc;
        img {
            width: 40px;
            height: 40px;
        }
        .span1 {
            color: purple;
        }
        .span2 {
            color: #ccc;
        }
    }
}
</style>